<template>
  <div>
    <div class="main-top">
      <el-button type="success" icon="el-icon-plus"
        >添加商品</el-button
      >
      <el-button ype="danger" icon="el-icon-delete" @click="batchDelete(tableChecked)"
        >批量删除</el-button
      >
      <div class="demo-input-suffix main-right">
        商品内容：
        <el-input
          placeholder="商品名称/货号"
          prefix-icon="el-icon-search"
          v-model="input1"
          class="input"
        >
        </el-input>
      </div>
      <div class="block demo-input-suffix">
        添加时间：
        <el-date-picker
          v-model="input2"
          type="datetime"
          class="input"
          placeholder="请选择时间"
        >
        </el-date-picker>
      </div>
      <el-button type="success" icon="el-icon-search">查询</el-button>
    </div>
    <el-table :data="lists.filter(item=>item.and!=='4'&& item.state)" border style="width: 100%" :default-sort="{ prop: 'time' }" @selection-change="handleSelectionChange">
      <el-table-column fixed type="selection" width="50" align="center"></el-table-column>
      <el-table-column prop="bianhao" label="商品编号" width="100" align="center">
      </el-table-column>
      <el-table-column
        prop="listname"
        label="商品名称"
        width="80"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="leixing"
        label="商品类型"
        width="80"
        align="center"
      ></el-table-column>
      <el-table-column prop="oldprice" label="原价/现价" width="180" align="center">
        <template slot-scope="scope">
          <span>原价:￥{{ scope.row.oldprice }}</span
          ><br />
          <span>现价:￥{{ scope.row.newprice }}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="name"
        label="所属游戏"
        width="80"
        align="center"
      ></el-table-column>
      <el-table-column prop="state" label="是否上架" width="80" align="center">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.state"
            @change="changeStatus(scope.row)"
            active-color="#55ca7d"
          >
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column
        prop="num"
        label="库存"
        width="80"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="time"
        sortable
        label="加入时间"
        width="100"
        align="center"
      ></el-table-column>
      <el-table-column label="操作" width="250" align="center">
        <template slot-scope="scope">
          <el-button
            type="primary"
            icon="el-icon-edit"
            @click="handlebianji(scope.row)"
          ></el-button>
          <el-button
            type="danger"
            icon="el-icon-delete"
            @click="handleDelete(scope.$index, scope.row)"
          ></el-button>
          <el-button type="warning" @click="handlerizhi(scope.row)">日志</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="listQuery.pageIndex"
      :limit.sync="listQuery.pageSize"
      @pagination="getList"
    />
  </div>
</template>

<script>
import pagination from "@/components/Pagination";
import axios from "axios";
import { mapState } from 'vuex';
export default {
  components: {
    pagination,
  },
  data() {
    return {
      listLoading: false,
      total: 0,
      listQuery: {
        pageIndex: 1,
        pageSize: 10,
      },
      input1: "",
      input2: "",
      //数据
      newData: [],
      list: [],
      tableChecked: [], //被选中的记录数据-----对应“批量删除”传的参数值
      ids: [], //批量删除id
    };
  },
  computed:{
        ...mapState('user',{
            lists:state=>state.newData
            
        })
    },
  // mounted() {
  //   //请求总数居
  //   axios.post("/list").then(({ data }) => {
  //     let datas=[]
  //     // this.list=data
  //     data.forEach(element => {
  //       if(element.and!=='4'&& element.state){
  //         datas.push(element)
  //       }
  //     });
  //     this.list=datas
  //     this.getList();
  //   });
  // },
  methods: {
    //删除
    handleDelete(index, row) {
      let dataid = {
        id: row.bianhao
      };
      axios.post("shan", dataid).then(({ data }) => {
        let { code, newData } = data;
        if (code === 1) {
          let datas=[]
          newData.forEach(element => {
            if(element.and!=='4'&& element.state){
              datas.push(element)
            }
          });
          this.list = datas
          this.getList();
        }
      });
    },
    // 批量删除
    handleSelectionChange(val) {
      console.log(val);
      this.tableChecked = val;
    },
    batchDelete(rows) {
      var _this = this;
      _this
        .$confirm("是否确认此操作?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
        .then(() => {
          rows.forEach((element) => {
            _this.ids.push(element.bianhao);
            console.log(_this.ids);
          });
          let param = {
            ids: _this.ids
          };
          axios.post("pi", param).then(({ data }) => {
            let { code, newData } = data;
            if (code === 111) {
              let datas=[]
              newData.forEach(element => {
                if(element.and!=='4'&& element.state){
                  datas.push(element)
                }
              });
              this.list = datas
              this.getList();
              // this.currentPage = 1;
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消",
          });
        });
    },
    //编辑
    handlebianji(row) {
      console.log(row);
    },
    //日志
    handlerizhi(row) {
      // console.log(row)
      // let obj={
      //   time:'',
      // }
      // obj.time=new Date().toLocaleString()
    },
    getList(val) {
      this.listLoading = true;
      this.total = parseInt(this.list.length);
      this.listLoading = false;
    },
  },
};
</script>

<style scoped>
ul,
li {
  list-style: none;
}
a {
  text-decoration: none;
}
.app-container {
  min-width: 1050px;
}
.box {
  width: 95%;
  height: 100%;
  margin: 0 auto;
}
.top {
  width: 100%;
  overflow: hidden;
  margin: 0 auto;
}
.top li {
  float: left;
  padding: 5px 10px;
  cursor: pointer;
}
.titleactive {
  color: #55ca7d;
}
.tabactive {
  border-bottom: 2px solid #55ca7d;
  color: #55ca7d;
}
.main {
  width: 100%;
  overflow: hidden;
  margin: 0 auto;
}
.main-top {
  display: flex;
  margin-top: 25px;
  padding: 5px;
  border: 1px solid lightgray;
}
.main-top .demo-input-suffix .input {
  width: 200px;
}
.main-right {
  margin-left: 300px;
}
</style>